<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <!-- Note: 3.8 is the last working version //-->
        <!-- Note: screen resolution to reliably reproduce bug is 1920x1200 //-->
        <!-- script src="//maps.googleapis.com/maps/api/js?v=3.8&sensor=false"></script //-->
        <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
        <style>
        html, body, #mapcanvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="mapcanvas"></div>
        <script>
            google.maps.event.addDomListener(window, 'load', function(){
            
                var tile_layer = {
                    tileSize: new google.maps.Size(256, 256),
                    isPng: true,
                    url: null,
                    getTile: function(tile, zoom, d) {
                        var img = d.createElement('img');
                        img.src = 'black.png?' + new Date().getTime();
                        img.style.opacity  = 0.25;
                        return img;
                    }
                };
                
                var map_opt = {
                  zoom: 18,
                  center: new google.maps.LatLng(37.78313383212, -122.4039494991302),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                            
                var map = new google.maps.Map(document.getElementById("mapcanvas"), map_opt);
                
                for(var i = 0; i < 8; ++i){
                    map.overlayMapTypes.push(Object.create(tile_layer));
                };
            
            });      
        </script>
    </body>
</html>